<template>
  <view>
    <!-- 搜索框 -->
    <view class="search-box">
      <uni-search-bar
        placeholder="请搜索需要的商品"
        cancelButton="none"
        clearButton="auto"
        :radius="100"
        @input="handleSearch"
      ></uni-search-bar>
    </view>
    <!-- 搜索建议列表 -->
    <view class="sugg-list" v-if="sugguestions.length">
      <view
        v-for="item in sugguestions"
        :key="item.goods_id"
        class="sugg-item"
        @click="gotoProductDetail(item.goods_id)"
      >
        <view class="goods-name">{{ item.goods_name }}</view>
        <uni-icons type="arrowright" size="16"></uni-icons>
      </view>
    </view>
    <!-- 搜索历史 -->
    <view class="history-box" v-else>
      <!-- 标题区域 -->
      <view class="history-title">
        <text>搜索历史</text>
        <uni-icons type="trash" size="17"></uni-icons>
      </view>
      <!-- 历史列表 -->
      <view class="history-list">
        <uni-tag
          v-for="(item, index) in historyList"
          :key="index"
          :text="item"
          type="success"
          @click="gotoProductList(item)"
        ></uni-tag>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 1. 搜索建议数据数组
      sugguestions: [],
      // 2. 输入关键字
      keywords: "",
      // 3. 搜索历史数据数组
      historyList: [],
    };
  },
  created() {
    // 从本地读取存储的历史关键词
    // const keyWords = uni.getStorageSync("keyWords");
    // if (keyWords !== "") {
    //   this.historyList = JSON.parse(keyWords);
    // }

    this.historyList = JSON.parse(uni.getStorageSync("keyWords") || "[]");
  },
  methods: {
    // 1. 获取输入框中输入的内容
    handleSearch(e) {
      // 1.1 清除延时器
      clearTimeout(this.timer);
      // 1.2 设置定时器
      this.timer = setTimeout(() => {
        this.keywords = e;
        this.getSugguestions();
      }, 500);
    },
    // 2. 获取数据
    async getSugguestions() {
      // 2.1 判断关键词是否为空
      if (this.keywords.trim() === "") {
        this.sugguestions = [];
        return;
      }

      // 2.2 发起请求
      const { meta, message } = await this.$http.get("/goods/qsearch", {
        query: this.keywords,
      });
      if (meta.status !== 200) {
        return this.$msg();
      }
      // console.log(message);
      this.sugguestions = message;

      // 2.4 记录搜索关键字
      this.updateHistory();
    },
    // 3. 跳转到商品详情
    gotoProductDetail(good_id) {
      uni.navigateTo({
        url: `/pages_sub1/product-detail/product-detail?pid=${good_id}`,
      });
    },
    // 4. 更新关键字数组
    updateHistory() {
      // 4.1 先把关键字放入数组
      this.historyList.unshift(this.keywords);
      // 4.2 关键字去重
      const arr = [...new Set(this.historyList)];
      // 4.3 关键字数量限制
      if (arr.length > 10) {
        arr.pop();
      }
      this.historyList = arr;
      // 4.4 把关键词存储到本地
      uni.setStorageSync("keyWords", JSON.stringify(this.historyList));
    },
    // 5. 跳转到商品列表页面
    gotoProductList(keywords) {
      uni.navigateTo({
        url: `/pages_sub1/product-list/product-list?query=${keywords}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// 深度穿透
::v-deep .uni-searchbar {
  background-color: #c00000 !important;
}

.search-box {
  position: sticky;
  top: 0;
  z-index: 999;
}

// 搜索建议列表
.sugg-list {
  padding: 0 10rpx;

  .sugg-item {
    font-size: 24rpx;
    padding: 26rpx 0;
    border-bottom: 1rpx solid #efefef;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .goods-name {
      margin-right: 6rpx;

      // 溢出部分隐藏
      overflow: hidden;

      // 文字不允许换行
      white-space: nowrap;

      // 文字溢出后使用省略号表示
      text-overflow: ellipsis;
    }
  }
}

// 搜索历史
.history-box {
  padding: 0 10rpx;

  .history-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80rpx;
    font-size: 26rpx;
    border-bottom: 2rpx solid #efefef;
  }

  .history-list {
    display: flex;
    flex-wrap: wrap;

    uni-tag {
      margin-top: 10rpx;
      margin-right: 10rpx;
    }
  }
}
</style>